﻿
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> - Sketch2Code - Transform sketches into HTML markup automagically!</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800">
    <script src="/Scripts/modernizr-2.6.2.js"></script>
    <link href="/Content/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
        <div id="header" class="container-fluid">
            <div class="row">
                <div class="col">
                    <img alt="Microsoft Logo" src="/content/img/logo_MS.png">
                </div>

                <div class="col text-right">
                    <a target="_blank" href="https://www.ailab.microsoft.com/">
                        AI Lab
                    </a>
                </div>
            </div>
        </div>

        <div class="container-fluid hidden-responsive">
            <div id="steps" class="row justify-content-center">
                <div class="col">
                    <span class="dot active">1</span>
                    <span class="header-txt active">UPLOAD DESIGN</span>
                </div>

                <div class="col">
                    <span class="dot">2</span>
                    <span class="header-txt">SKETCH2CODE IS AT WORK!</span>
                </div>

                <div class="col">

                    <span class="dot">3</span>

                    <span class="header-txt">DOWNLOAD YOUR HTML</span>
                </div>
            </div>
        </div>

        <div id="content">
            <div id="title">
                <h1>
                    <span class="main">Sketch</span>
                    <span class="number">2</span>
                    <span class="main">Code</span>
                </h1>

                <h2 class="subtitle">Transform any hands-drawn design into a HTML code with AI.</h2>
            </div>

            <div id="actions" class="container-fluid">
                <div class="row">
                    <div class="col d-flex flex-column justify-content-center">
                        <form class="center-hz-right"  enctype="multipart/form-data" method="post" action="/ready-to-start">
                            <label  for="imageData">
                                <img alt="Upload sketch" src="/content/img/button_upload.svg" width="250px">
                                <input id="imageData" class="custom-file-input" name="imageData" type="file" accept="image/*" onchange="submitFile();" />
                            </label>
                        </form>
                    </div>
                    <div class="col col-md-1 d-flex flex-column justify-content-center hidden-responsive"><span class="main-or">OR</span></div>
                    <div class="col d-flex flex-column justify-content-center hidden-responsive">
                        <a href="/take-snapshot" id="main_01_button_pic"><img alt="Take a picture" src="/content/img/button_picture.svg" width="250px"></a>
                    </div>
                </div>
            </div>

            <div id="howItWorks" class="container">
                <h3 class="text-center">Experiment Workflow</h3>

                <div class="container">
                    <div id="step1" class="row">
                        <div class="col">
                            <div class="title">
                                <div class="number">01</div>
                                <h5>
                                    Detect Design Patterns
                                </h5>
                            </div>
                            <p>
                                A Custom Vision Model trained to perform object recognition against
                                HTML hand drawn patterns is used to detect meaningful design elements into an image.&nbsp;
                            </p>
                        </div>
                        <div class="col align-middle"><img src="/Content/img/how_to_01PNG.png" /></div>
                    </div>
                </div>


                <div class="container">
                    <div id="step2" class="row">
                        <div class="col">
                            <img alt="Understand handwritten text" src="/Content/img/how_to_02PNG.png">
                        </div>
                        <div class="col">
                            <div class="title">
                                <div class="number">02</div>
                                <h5>
                                    Understand handwritten text
                                </h5>
                            </div>
                            <p>
                                Each detected element is passed through a Text Recognition Service to extract handwritten content.
                            </p>
                        </div>
                    </div>
                </div>

                <div class="container">
                    <div id="step3" class="row">
                        <div class="col">
                            <div class="title">
                                <div class="number">03</div>
                                <h5>
                                    Understand Structure
                                </h5>
                            </div>
                            <p>
                                The information of the detected objects and their position inside the
                                image is feed into an algorithm that generates underlying structure.
                            </p>
                        </div>
                        <div class="col align-middle"><img alt="Understand Structure" src="/Content/img/how_to_03PNG.png"></div>
                    </div>
                </div>

                <div class="container">
                    <div id="step4" class="row">
                        <div class="col">
                            <img alt="Understand handwritten text" src="/Content/img/how_to_04PNG.png">
                        </div>
                        <div class="col">
                            <div class="title">
                                <div class="number">04</div>
                                <h5>
                                    Build HTML
                                </h5>
                            </div>
                            <p>
                                A valid HTML is generated accordingly to the detected layout containing the detected design elements.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
    </div>

    <div class="content-footer2">
        <div class="container-fluid">

            <div class="row hidden-responsive">

                <div class="col">
                    <img alt="Microsoft Logo" class="img-fluid float-left d-flex flex-column justify-content-end center-logo-left" src="/content/img/logo_MS.png">
                </div>
                <div class="col">
                    <img alt="Logo web" class="img-fluid float-right center-logo-right" src="/content/img/img_spareMobile.svg">
                </div>
            </div>

            <div class="row justify-content-center hidden-md">
                <img alt="Microsoft Logo" class="img-fluid float-left d-flex flex-column justify-content-end" src="/content/img/logo_MS.png">
            </div>
        </div>
        <div id="footer" class="p-3 p-md-3">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="text-center text-white pb-4">
                        Your picture may be used to improve the underlying AI.
                    </div>
                </div>
                <div class="row footer-links2">
                    <div class="col"><a target="_blank" href="https://www.ailab.microsoft.com/">AI Lab</a></div>
                    <div class="col"><a target="_blank" href="https://support.microsoft.com/en-us/contactus">Contact Us</a></div>
                    <div class="col"><a target="_blank" href="https://go.microsoft.com/fwlink/?LinkId=521839">Privacy &amp; Cookies</a></div>
                    <div class="col"><a target="_blank" href="https://go.microsoft.com/fwlink/?LinkID=206977">Terms of use</a></div>
                    <div class="col"><a target="_blank" href="https://www.microsoft.com/trademarks">Trademarks</a></div>
                </div>
            </div>
            <div class="text-center text-white pt-5">
                © Microsoft 2018
            </div>
        </div>
        </div>
            <script src="/Scripts/jquery-3.0.0.js"></script>
            <script src="/Scripts/bootstrap.js"></script>

</body>
</html>